<template>
    <div v-if="showPage">
      <div class="search">
        <i class="iconfont iconsousuo"></i>
        <input type="text" :focus="isFocus" confirm-type="search" @confirm="searchBtn">
      </div>
      <div v-if="resultShow">
        <div class="homeSearch">
          <div class="myCollect-header">
            <div :class="active===0 ? 'active':''" ﻿@tap="changeTab(0)">
              <img src="/static/img/collectAll.png" alt="">
              <p>全部</p>
            </div>
            <div :class="active===1 ? 'active':''" ﻿@tap="changeTab(1)">
              <img src="/static/img/collectProject.png" alt="">
              <p>项目</p>
            </div>
            <div :class="active===2 ? 'active':''" ﻿@tap="changeTab(2)">
              <img src="/static/img/qunzu.png" alt="">
              <p>群组</p>
            </div>
            <div :class="active===3 ? 'active':''" ﻿@tap="changeTab(3)">
              <img src="/static/img/collectPost.png" alt="">
              <p>帖子</p>
            </div>
          </div>
        </div>
        <div>
          <home-search :info="item" v-for="(item,index) in info" :key="index"></home-search>
        </div>
      </div>
      <bottoms></bottoms>
    </div>
</template>

<script>
  import homeSearch from '@/components/homeSearchResult/index'
  import bottoms from '@/components/reachBottom/index'
    export default {
        name: "homeSearchPage",
      components:{
        homeSearch,
        bottoms
      },
      data(){
          return{
            value: "",
            resultShow: false,
            active:0,
            showPage: true,
            loadingEnd:{
              moduleOne: false,
            },
            isFocus:false,
            totalPage: 1,
            currentPage: 1,
            info:[],
          }
      },
      methods:{
        searchBtn(e){
          this.value = e.mp.detail.value.replace(/\s+/g,"");
          this.resultShow = true;
          this.viewLoad();
        },
        changeTab(type){
          this.active = type;
          this.viewLoad();
        },
        getIndexSearchList() {
          let info = {
            page_size: 10,
            page: this.currentPage,
            type: this.active,
            keyword: this.value,
          };
          this.$ajax
            .post(this.$api.getIndexSearchList, info)
            .then(res => {
              this.loadingEnd.moduleOne = true;
              this.info.push(...res.data);
              this.totalPage = res.total_page;
              if(res.total_count === 0){
                this.$store.dispatch("changeIsEmpty", true);
              } else {
                this.$store.dispatch("changeIsEmpty", false);
              }
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true;
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        viewLoad(){
          this.currentPage = 1;
          this.info = [];
          this.loadingEnd.moduleOne = false;
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.getIndexSearchList();
        }
      },
      onPullDownRefresh(){
        this.viewLoad();
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      onReachBottom(){
        if(this.totalPage > this.currentPage){
          this.$store.dispatch("changeIsMore", true);
          this.$store.dispatch("changeIsEnd", false);
          this.currentPage++;
          this.getIndexSearchList();
        } else {
          this.$store.dispatch("changeIsEnd", true);
          this.$store.dispatch("changeIsMore", false);
        }
      },
      computed:{
        hideLoading(){
          if(this.loadingEnd.moduleOne){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
      onLoad(){
        this.currentPage=1;
        this.value = "";
        this.resultShow = false;
        this.active = 0;
        this.loadingEnd = {
          moduleOne: false
        };
        this.isFocus = true;
        this.totalPage = 1;
        this.$store.dispatch("changeIsMore", false);
        this.$store.dispatch("changeIsEnd", false);
        this.$store.dispatch("changeIsEmpty", false);
      },
      onHide(){
        this.showPage= false;
      },
      onShow(){
        this.showPage= true;
        this.viewLoad();
      },
    }
</script>

<style scoped>
  .homeSearch{
    padding: 30rpx;
  }
  .search{
    padding: 10rpx 30rpx;
    display: flex;
    align-items: center;
    position: relative;
  }
  .search>i{
    position: absolute;
    left: 50rpx;
    color: #9A9A9A;
  }
  .search>input{
    width: 100%;
    height: 63rpx;
    background-color: #F6F6F6;
    border-radius: 32rpx;
    padding: 0 30rpx 0 70rpx;
    box-sizing: border-box;
  }
  .myCollect-header{
    padding: 0 0 34rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    border-bottom: 14rpx solid #F7F7F7;
  }
  .myCollect-header>div{
    text-align: center;
  }
  .myCollect-header>div>img{
    width: 68rpx;
    height: 68rpx;
  }
  .myCollect-header>.active>img{
    width: 78rpx;
    height: 78rpx;
  }
  .myCollect-header>div>p{
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #323232;
    font-weight: bold;
    line-height: 29rpx;
  }
  .myCollect-header>.active>p{
    color: #EF5A56;
  }
</style>
